<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>fish-admin</title>
    <link rel="stylesheet" href="../bower_components/layui/dist/css/layui.css">
    <link rel="stylesheet" href="./css/fish-admin.css">
    <script src="../bower_components/layui/src/layui.js" charset="utf-8"></script>
</head>
<body class="layui-layout-body ">
<div class="fa-layout ">
    <!-- 侧边导航开始 -->
    <div class="fa-side">
        <div class="fa-logo"></div>
        <ul class="fa-nav-box fa-nav">
            <li class="fa-nav-dir">
                <span>页面布局</span>
            </li>
            <ul class="fa-nav">
                <li class="fa-nav-item" title="栅格" fa-href="grid.html" fa-target="TAB">
                    <span>栅格</span>
                </li>
            </ul>
            <li class="fa-nav-dir">
                <span>页面元素</span>
            </li>
            <ul class="fa-nav">
                <li class="fa-nav-item" title="按钮" fa-href="button.html" fa-target="TAB">
                    <span>按钮</span>
                </li>
                <li class="fa-nav-item" title="表单" fa-href="form.html" fa-target="TAB">
                    <span>表单</span>
                </li>
                <li class="fa-nav-item" title="面包屑" fa-href="nav.html" fa-target="TAB">
                    <span>面包屑</span>
                </li>
                <li class="fa-nav-item" title="选项卡" fa-href="tab.html" fa-target="TAB">
                    <span>选项卡</span>
                </li>
                <li class="fa-nav-item" title="进度条" fa-href="progress.html" fa-target="TAB">
                    <span>进度条</span>
                </li>
                <li class="fa-nav-item" title="面板" fa-href="panel.html" fa-target="TAB">
                    <span>面板</span>
                </li>
                <li class="fa-nav-item" title="徽章" fa-href="badge.html" fa-target="TAB">
                    <span>徽章</span>
                </li>
                <li class="fa-nav-item" title="时间线" fa-href="timeline.html" fa-target="TAB">
                    <span>时间线</span>
                </li>
                <li class="fa-nav-item" title="静态表格" fa-href="table-element.html" fa-target="TAB">
                    <span>静态表格</span>
                </li>
                <li class="fa-nav-item" title="动画" fa-href="anim.html" fa-target="TAB">
                    <span>动画</span>
                </li>
                <li class="fa-nav-item" title="其他元素" fa-href="other.html" fa-target="TAB">
                    <span>其他元素</span>
                </li>
            </ul>
            <li class="fa-nav-dir">
                <span>组件示例</span>
            </li>
            <ul class="fa-nav">
                <li class="fa-nav-item" title="弹出层" fa-href="layer.html" fa-target="TAB">
                    <span>弹出层</span>
                </li>
                <li class="fa-nav-item" title="日期选择器" fa-href="laydate.html" fa-target="TAB">
                    <span>日期选择器</span>
                </li>
                <li class="fa-nav-item" title="分页" fa-href="laypage.html" fa-target="TAB">
                    <span>分页</span>
                </li>
                <li class="fa-nav-item" title="文件上传" fa-href="upload.html" fa-target="TAB">
                    <span>文件上传</span>
                </li>
                <li class="fa-nav-item" title="穿梭框" fa-href="transfer.html" fa-target="TAB">
                    <span>穿梭框</span>
                </li>
                <li class="fa-nav-item" title="树形组件" fa-href="tree.html" fa-target="TAB">
                    <span>树形组件</span>
                </li>
                <li class="fa-nav-item" title="颜色选择器" fa-href="colorpicker.html" fa-target="TAB">
                    <span>颜色选择器</span>
                </li>
                <li class="fa-nav-item" title="滑块" fa-href="slider.html" fa-target="TAB">
                    <span>滑块</span>
                </li>
                <li class="fa-nav-item" title="评分" fa-href="rate.html" fa-target="TAB">
                    <span>评分</span>
                </li>
                <li class="fa-nav-item" title="轮播" fa-href="carousel.html" fa-target="TAB">
                    <span>轮播</span>
                </li>
                <li class="fa-nav-item" title="代码修饰器" fa-href="code.html" fa-target="TAB">
                    <span>代码修饰器</span>
                </li>
            </ul>
        </ul>
    </div>
    <!--侧边导航结束-->
    <div class="fa-main">
        <!--头部导航开始-->
        <div class="fa-header">
            <div class="fa-side-switch layui-icon layui-icon-shrink-right"></div>
            <div class="fa-side-switch layui-icon layui-icon-spread-left"></div>

            <ul class="layui-nav fa-nav-left">
                <li class="layui-nav-item">
                    <a href="">A系统</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">其他系统</a>
                    <dl class="layui-nav-child"> <!-- 二级菜单 -->
                        <dd><a href="">D系统</a></dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav fa-nav-right">
                <li class="layui-nav-item">
                    <a href="">控制台<span class="layui-badge">9</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="">个人中心<span class="layui-badge-dot"></span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">修改信息</a></dd>
                        <dd><a href="javascript:;">安全管理</a></dd>
                        <dd><a href="javascript:;">退了</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <!--头部导航结束-->

        <!-- 内容区域 开始-->
        <div class="fa-tab">
            <div class="fa-tab-prev layui-icon layui-icon-prev"></div>
            <div class="fa-tab-next layui-icon layui-icon-next"></div>
            <div class="fa-tab-ctr layui-icon layui-icon-down"></div>
            <ul class="fa-tab-ctr-more">
                <li fa-event="refresh">刷新</li>
                <li fa-event="closeOth">关闭其他</li>
                <li fa-event="closeAll">关闭全部</li>
            </ul>
            <div class="fa-tab-pan">
                <ul>
                    <li class="fa-tab-item fa-selected fa-tab-locked">
                        <span>首页</span><i class="layui-icon layui-icon-close"></i>
                    </li></ul>
            </div>
        </div>
        <div class="fa-content ">
            <div class="fa-content-item">
                <iframe src="main.html"></iframe>
            </div>
        </div>
    </div>
</div>
<script>
    layui.config({
        base: './js/'
    }).extend({
        fa: 'fish-admin'
    });
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element', 'fa'], function () {
        var element = layui.element,
            fa = layui.fa;
    });
</script>
</body>
</html>
